<template>
	<view>
		<scroll-view style="height: 100vh;background: #f7f7f7;" scroll-y="true" scroll-with-animation>
			<view class="center">
				<view class="center-left">
					<text class="center-leftt">{{yue}}</text>月<text class="center-leftt">{{ri}}</text>日 {{dayOfWeek}}
					{{dataS.departTime||''}}
				</view>
				<view class="" style="display: flex;align-items: center;border-bottom: 2upx solid #f7f7f7;">
					<view class="MyOrder_1y_2">
						<view class="MyOrder_1y_2x">
							<text class="MyOrder_1y_2x-1x"></text>{{dataS.startStation||''}}
						</view>
						<view class="MyOrder_1y_2tse">

						</view>
						<view class="MyOrder_1y_2x">
							<text class="MyOrder_1y_2y-1y"></text>{{dataS.endStation||''}}
						</view>
					</view>
					<view class="iconfont iconbodadianhua"
						style="font-size:60upx;margin-left: auto;margin-right:10upx;padding: 20upx;color: #6969f3;"
						v-if="dataS.phone" @click="PhoneCallsx(dataS.phone)">

					</view>
				</view>

				<view class="center-leftss">
					<view class="center-leftss_1">
						<text class="iconfont iconxuanzhong"
							style="color: #6969f3;font-size: 28upx;margin-right: 10upx;"></text>旅客提前10分钟到达乘车点<view
							class="caption-wrap-1" @click="iehuan">
							会员须知</view><text class="iconfont iconxiaojiantou"></text>
					</view>
					<view class="center-leftss_1">
						<text class="iconfont icongantanhao"
							style="color: #777;font-size: 28upx;margin-right: 10upx;"></text>不支持在线改签
					</view>
					<view class="center-leftss_1">
						<text class="iconfont iconxuanzhong"
							style="color: #6969f3;font-size: 28upx;margin-right: 10upx;"></text>无需取票，可凭电子票二维码乘车
					</view>
				</view>
			</view>
			<view class="DEIDS">
				<view class="ccrboxtitle">
					<text class="ccrboxtitle_1">请选择座位</text><text class="ccrboxtitle_2">已选座位<text
							style="color: #6969f3;font-weight: 500;margin-left: 5upx;">{{seatSum}}</text>/5</text>
				</view>
				<view class="ddedsss">
					<text class="de-a"></text>
					<text>可选择</text>
					<text class="de-b"></text>
					<text>已出售</text>
					<text class="de-c"></text>
					<text>已选择</text>
				</view>
				<view class="frifms">
					<view class="desdxs " @tap="select_date(item,index)"
						v-for="(item,index) in dataS.ddPlandateSeatList" :key="index"
						:class="isDivisibleByTwo(index+1)&&isDivisibleByfors(index+1)?'atives':''">
						<text v-if="item.status==0" class="detedxrs iconkexuanzuowei iconfont"> </text>
						<text v-else class="detedxrs iconyixuanzuowei iconfont"
							:class="item.status==1||item.status==2?'active-tags':item.status==3?'active-tag':''"></text>
						<text style="position: absolute;font-size: 30upx;font-weight: 500;"
							:style="{color:item.status==1||item.status==2||item.status==3?'#fff':'#666'}">{{item.seat}}</text>
					</view>
				</view>

			</view>
			<view class="ccrbox" style="padding-bottom: 30upx;">
				<view class="ccrboxtitle" @click="tianjia()">
					<text class="ccrboxtitle_1">请选择乘车人</text><text class="ccrboxtitle_2">乘车人数<text
							style="color: #6969f3;font-weight: 500;margin-left: 5upx;">{{formdataA.length}}</text>/5</text>
				</view>
				<view class="boxsss" v-for="(item,index) in formdataA" :key="index">
					<view class="boxsss-2" @click.stop="xuanzes(index)">
						<view class="boxsss-2-1">
							{{item.name}}
						</view>
						<view class="boxsss-2-2">
							证件号 {{item.idCard}}
						</view>
						<view class="boxsss-2-2 boxsss-3">
							<text class="iconfont iconxuanzhong" style="color: #6969f3;"
								v-if="item.carryingChildren=='1'"></text>
							<text class="iconfont iconxuanze-weixuanze" v-else></text>
							是否携带儿童
						</view>
					</view>
					<view class="boxsss-1" @click.stop="shanchu(index,item)">
						<text class="iconfont iconevert_delete" style="color: red;"></text>
					</view>
				</view>
				<view class="ccrbox_nt" @click="tianjia()">
					<text class="iconfont iconjia" style="font-size: 32upx;margin-right: 10upx;"></text>添加乘车人
				</view>
			</view>

			<view class="ccrbox">
				<view class="input-row">
					<label>上车地 </label>
					<picker @change="bindPickerChange" style="align-items: center;" mode="selector" :value="indexs"
						:range="objectArray" :range-key="'namse'">
						<view class="picker"
							style="font-size:28rpx;display: flex;justify-content: flex-end;align-items: center; width: 535upx;"
							:style="{color:objectArray[indexs].namse?'':'#999'}">
							{{objectArray[indexs].namse||'请选择上车点'}}
							<text class="iconfont iconxiaojiantou"
								style="font-size: 28upx;margin-left: 10upx;color: #000;"></text>
						</view>
					</picker>
				</view>
				<!-- <view class="input-row" >
					<text class="imges iconfont iconweixinzhifu" style="color: #6969f3;"></text>
					<view class="input-rowyse">
						会员支付
					</view>
					<text @click="navbts(1)" class="iconfont iconxuanzhong" style="color: #6969f3;" v-if="indexA=='1'"></text>
					<text @click="navbts(1)" class="iconfont iconxuanze-weixuanze" v-else></text>
				</view> -->
				<view class="input-row" style="border-bottom: none;">
					<text class="imges iconfont iconweixinzhifu" style="color: #83ca3d;"></text>
					<view class="input-rowyse">
						微信支付
					</view>
					<text @click="navbts(2)" class="iconfont iconxuanzhong" style="color: #6969f3;"
						v-if="indexA=='2'"></text>
					<text @click="navbts(2)" class="iconfont iconxuanze-weixuanze" v-else></text>
				</view>
			</view>
			<view class="">
				<view class="" style="height: 120upx;">

				</view>
				<view class=" " style="padding-bottom: env(safe-area-inset-bottom);">

				</view>
			</view>
		</scroll-view>
		<view class="BuyTicket_4">
			<view class="BuyTicket_4x">
				<view class="BuyTicket_4x_1">
					合计：<text style="font-size: 42upx;">¥{{priceSum||0}}</text> <text
						style="font-size: 28upx;color: #000;margin-left: 20upx;">共{{seatSum||0}}张</text>
				</view>
				<view class="BuyTicket_4x_btn" @click="addClick">
					支付
				</view>
			</view>
			<view class="BuyTicket_4y">
				<view class="" style="height: 2upx;">

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import ccPicker from '@/components/cc-picker/cc-picker.vue';
	export default {
		components: {
			ccPicker,
		},
		data() {
			return {
				indexA: 2,
				indexs: null,
				objectArray: [{
					namse: '暂无上车点数据',
					id: '-1'
				}],
				arrays: [],
				array: [],
				dataS: {},
				state: '',
				priceSum: 0,
				resdfed: [],
				name: '',
				idCard: '',
				phone: '',
				value: 0,
				address: '',
				price: 0,
				seatSum: 0,
				status: '',
				userId: '',
				openId: '',
				formdataA: [],
				datasotprd: [],
				persons: {
					countrys: '',
					country_strs: ''
				},
				seatlist: [],
				ddOrderDetailList: [],
				datat: {},
				yue: '',
				ri: '',
				dayOfWeek: ''
			}
		},
		onLoad: function(options) {
			if (options) {
				var datat = JSON.parse(options.id)
				this.datat = datat
				this.price = datat.price
				this.address = datat.priceName
				this.firdlist(datat)
				this.findAddressList(datat)
			}

		},
		onShow() {

		},
		methods: {
			...mapMutations(['getData', "formData"]),
			isDivisibleByfors(number) {
				if (number) {
					if (number % 4 === 0) {
						return false; // 能被2整除，返回true
					} else {
						return true; // 不能被2整除，返回false
					}
				}
			},
			PhoneCallsx(e) {
				uni.makePhoneCall({
					phoneNumber: e,
					success: (res) => {},
					fail: (res) => {
						console.log("调用失败!");
					}
				});
			},
			isDivisibleByTwo(number) {
				if (number) {
					if (number % 2 === 0) {
						return true; // 能被2整除，返回true
					} else {
						return false; // 不能被2整除，返回false
					}
				}
			},
			navbts(e) {
				this.indexA = e
			},
			timeDate(Dates) {
				if (Dates) {
					let parts = Dates.split("-");
					this.yue = parts[1]
					this.ri = parts[2]
					const specifiedDate = new Date(Dates);
					// 获取这个指定日期是星期几
					const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
					this.dayOfWeek = days[specifiedDate.getDay()];
				}

			},
			bindPickerChange(e) {
				if (this.objectArray[e.detail.value].id != '-1') {
					this.indexs = e.detail.value
				}
			},
			findAddressList(e) {
				var that = this
				var objP = {
					lineId: e.lineId,
					departTime: e.departTime
				}
				that.objectArra = []
				const obj = {
					url: 'ddAddress/findAddressList',
					data: objP,
					success(res) {
						var data = res.datas.list
						for (var i = 0; i < data.length; i++) {
							data[i].namse = data[i].name + '→' + data[i].departTime
						}
						that.objectArray = data
					},
					fail(res) {
						uni.showToast({
							title: res.msg,
							duration: 3000,
							icon: 'none'
						});
					},
					complete(res) {}
				}
				that.getData(obj)

			},
			xuanzes(index) {
				if (this.formdataA[index].carryingChildren == '0') {
					this.$set(this.formdataA[index], 'carryingChildren', '1')
				} else {
					this.$set(this.formdataA[index], 'carryingChildren', '0')
				}
			},
			firdlist(e) {
				var that = this
				let objP = {
					id: e.platndateId,

				}
				const obj = {
					url: 'ddPlandate/get',
					data: objP,
					success(res) {
						that.dataS = res.datas
						that.timeDate(that.dataS.departDate)
					},
					fail(res) {
						uni.showToast({
							title: res.msg,
							duration: 3000,
							icon: 'none'
						});
					},
					complete(res) {}
				}
				that.formData(obj)
			},
			shanchu(index) {
				this.formdataA.splice(index, 1)
			},
			iehuan() {
				uni.navigateTo({
					url: '/pagesB/PassengerNotice/PassengerNotice'
				})
			},
			tianjia() {
				uni.navigateTo({
					url: "/pagesA/passenger/passenger?id=2"
				})
			},
			select_date(e, index) {
				if (this.dataS.ddPlandateSeatList[index].status == 0) {
					if (this.seatSum < 5) {
						this.dataS.ddPlandateSeatList[index].status = 3;
						this.seatSum += 1
						this.ddOrderDetailList.push(e)
					} else {
						uni.showToast({
							title: '座位的数量不得超过5张～',
							duration: 3000,
							icon: 'none'
						});
					}
				} else if (this.dataS.ddPlandateSeatList[index].status == 3) {
					this.dataS.ddPlandateSeatList[index].status = 0;
					this.seatSum -= 1
					for (var i = 0; i < this.ddOrderDetailList.length; i++) {
						if (this.dataS.ddPlandateSeatList[index].seat == this.ddOrderDetailList[i].seat) {
							this.ddOrderDetailList.splice(i, 1)
						}
					}
				}
				this.priceSum = this.seatSum * this.price
				console.log(this.ddOrderDetailList)
			},

			addClick() {
				var that = this
				var e = that.indexA
				if (this.seatSum < 1) {
					uni.showToast({
						title: '请选择座位',
						duration: 3000,
						icon: 'none'
					});
					return false
				}
				if (this.formdataA.length < 1) {
					uni.showToast({
						title: '请选择乘车人',
						duration: 3000,
						icon: 'none'
					});
					return false
				}
				if (this.seatSum != this.formdataA.length) {
					uni.showToast({
						title: '请检查乘车人数和选中车票数量是否一致',
						duration: 3000,
						icon: 'none'
					});
					return false
				}
				if (this.indexs == null) {
					uni.showToast({
						title: '请选择上车地点',
						duration: 3000,
						icon: 'none'
					});
					return false
				}
				var seatlist = []
				for (var i = 0; i < this.ddOrderDetailList.length; i++) {
					seatlist.push(this.ddOrderDetailList[i].seat)
					for (var j = 0; j < this.formdataA.length; j++) {
						if (j == i) {
							this.ddOrderDetailList[i].iiFlag = "1"
							this.ddOrderDetailList[i].price = this.price
							this.ddOrderDetailList[i].phone = this.formdataA[j].phone
							this.ddOrderDetailList[i].idcard = this.formdataA[j].idCard
							this.ddOrderDetailList[i].carryingChildren = this.formdataA[j].carryingChildren
							this.ddOrderDetailList[i].cardAddress = this.formdataA[j].cardAddress
							this.ddOrderDetailList[i].name = this.formdataA[j].name
						}
					}
				}
				var address = ''
				if (this.objectArray.length > 0) {
					address = this.objectArray[this.indexs].namse
				}
				let objP = {
					iiFlag: '1',
					plandateId: this.dataS.id,
					status: '1',
					address: address,
					priceSum: this.priceSum,
					seat: seatlist.toString(),
					seatSum: this.seatSum,
					startPoint: this.dataS.startStation,
					endPoint: this.dataS.endStation,
					departDate: this.dataS.departDate,
					departTime: this.dataS.departTime,
					ddOrderDetailList: this.ddOrderDetailList,
					userId: uni.getStorageSync('userId') ? uni.getStorageSync('userId') : '',
					priceAddress: this.address
				}
				if (e == 1) {
					objP.type = '1'
				} else {
					objP.type = '0'
				}
				const obj = {
					url: 'ddOrderInfo/save',
					data: objP,
					success(res) {
						if (res.status == 200) {
							if (e == 1) {
								that.huyuanzhifu(res.datas)
							} else {
								that.processPay(res.datas)
							}
						} else {
							that.priceSum = 0
							that.seatSum = 0
							that.ddOrderDetailList = []
							that.firdlist(that.datat)
						}

					},
					fail(res) {
						uni.showToast({
							title: res.msg,
							duration: 3000,
							icon: 'none'
						});
					},
					complete(res) {}
				}
				that.getData(obj)
			},
			huyuanzhifu(param) {
				var that = this
				var objP = {
					iiFlag: '1',
					orderId: param.id,
					money: param.priceSum,
					type: '2',
					userId: uni.getStorageSync('userId') ? uni.getStorageSync('userId') : ''
				}
				const obj = {
					url: 'ddTransaRecord/save',
					data: objP,
					success(res) {
						uni.navigateBack()
					},
					fail(res) {
						uni.showToast({
							title: res.msg,
							duration: 3000,
							icon: 'none'
						});
						that.priceSum = 0
						that.seatSum = 0
						that.ddOrderDetailList = []
						that.firdlist(that.datat)
					},
					complete(res) {}
				}
				that.formData(obj)

			},
			processPay(param) {
				var that = this
				uni.login({
					success(res) {
						if (res.code) {
							var objP = {
								code: res.code
							}
							const obj = {
								url: 'ddPaywxreturnNew/getOpenId', //交通实业通利行接口
								// url: 'ddPaywxreturn/getOpenId',//四会招财猫接口
								data: objP,
								success(res) {
									var data = JSON.parse(res.data)
									that.xcxwxpay(param, data)
								},
								fail(res) {
									that.priceSum = 0
									that.seatSum = 0
									that.ddOrderDetailList = []
									that.firdlist(that.datat)
									uni.showToast({
										title: res.msg,
										duration: 3000,
										icon: 'none'
									});
								},
								complete(res) {}
							}
							that.getData(obj)
						}
					}
				})
			},
			// 支付接口    
			xcxwxpay(param, data) {
				var that = this
				var objP = {
					payOrderId: param.id,
					totalfee: param.priceSum,
					name: param.name,
					runDate: param.runDate,
					seat: param.seat,
					openid: data.openid,
				}
				const obj = {
					url: 'ddPaywxreturnNew/xcxwxpay', //交通实业通利行接口
					// url: 'ddPaywxreturn/xcxwxpay',//四会招财猫接口
					data: objP,
					success(res) {
						uni.requestPayment({
							provider: "wxpay",
							timeStamp: res.datas.timeStamp,
							nonceStr: res.datas.nonceStr,
							package: res.datas.package,
							signType: res.datas.signType,
							paySign: res.datas.paySign,
							success: (res) => {
								uni.showModal({
									title: '提示',
									content: '亲，您已经购票成功～',
									confirmText: '查看订单', // 自定义确定按钮的文字
									cancelText: '关闭返回', // 自定义取消按钮的文字
									success: (res) => {
										if (res.confirm) {
											uni.reLaunch({
												url: '/pages/my/my?id=1'
											})
										} else if (res.cancel) {
											uni.navigateBack()
										}
									}
								});
							},
							fail: (error) => {
								that.priceSum = 0
								that.seatSum = 0
								that.ddOrderDetailList = []
								that.firdlist(that.datat)
							},
							complete: () => {},
						});
					},
					fail(res) {
						uni.showToast({
							title: res.msg,
							duration: 3000,
							icon: 'none'
						});
					},
					complete(res) {}
				}
				that.getData(obj)

			},
		}
	}
</script>

<style scoped lang="scss">
	/* pages/index/chepiaoxinxi.wxss */

	.center {
		background: #fff;
		padding: 25rpx;
		color: #000;
		margin: 20rpx;
		padding-top: 15upx;
		overflow: hidden;
		border-radius: 16upx;
		position: relative;

		.center-left {
			font-size: 32upx;
			font-weight: 500;

			.center-leftt {
				font-weight: 900;
				font-size: 46upx;
			}
		}

		.MyOrder_1y_2 {
			padding: 20upx 0;
			padding-top: 10upx;

			.MyOrder_1y_2tse {
				margin-left: 12upx;
				border-left: 4upx dashed #eff0f2;
				height: 30upx;
			}

			.MyOrder_1y_2x {
				font-size: 34upx;
				display: flex;
				align-items: center;
				font-weight: 500;

				.MyOrder_1y_2x-1x {
					width: 16upx;
					height: 16upx;
					background: #61d34e;
					border-radius: 50%;
					border: 6upx solid #dff6dc;
					margin-right: 20upx;
				}

				.MyOrder_1y_2y-1y {
					width: 16upx;
					height: 16upx;
					background: #f3b158;
					border-radius: 50%;
					border: 6upx solid #fcefdd;
					margin-right: 20upx;
				}
			}
		}

		.center-leftss {
			margin-top: 20upx;

			.center-leftss_1 {
				display: flex;
				align-items: center;
				font-size: 24upx;
				margin-top: 10upx;
				color: #777;

				.caption-wrap-1 {
					font-size: 26upx;
					font-weight: 500;
					margin-left: auto;
					color: #000;
				}
			}
		}

	}

	.ccrbox {
		margin: 20upx;
		padding: 0 25upx;
		background-color: #fff;
		border-radius: 16upx;

		.ccrboxtitle {
			display: flex;
			align-items: center;
			height: 90upx;
			border-bottom: 2upx solid #f7f7f7;

			.ccrboxtitle_1 {
				font-size: 32rpx;
			}

			.ccrboxtitle_2 {
				font-size: 28upx;
				color: #999;
				margin-left: 10upx;
				margin-top: 5upx;
			}

		}

		.ccrbox_nt {
			border-radius: 35upx;
			width: 360upx;
			display: flex;
			align-items: center;
			height: 70upx;
			justify-content: center;
			background: #fbf4ce;
			margin: 0 auto;
			margin-top: 20upx;
			font-size: 30upx
		}

		.input-row {
			display: flex;
			align-items: center;
			height: 100upx;
			border-bottom: 2upx solid #f7f7f7;

			label {
				font-size: 30rpx;
				width: 150rpx;

			}

			.imges {
				font-size: 50upx;
			}

			.input-rowyse {
				font-size: 30rpx;
				margin-left: 10upx;
				margin-right: auto;
			}

			.iconfont {
				font-size: 42upx;
				padding: 10upx;
			}
		}

		.boxsss {
			display: flex;
			align-items: center;
			margin-top: 25upx;
			background-color: #FFFFFF;

			.boxsss-1 {
				flex: none;
				display: flex;
				align-items: center;
				padding-left: 50upx;
				padding-top: 30upx;
				padding-bottom: 30upx;
				height: 100%;

				.iconevert_delete {
					font-size: 46upx;
				}
			}

			.boxsss-2 {
				flex: 1;

				.boxsss-2-1 {
					font-size: 32upx;
				}

				.boxsss-2-2 {
					font-size: 26upx;
					color: #999;
					margin-top: 5upx;
				}
			}

			.boxsss-3 {
				flex: none;
				display: flex;
				align-items: center;

				.iconfont {
					font-size: 32upx;
				}

			}
		}

	}




	.DEIDS {
		margin: 20upx;
		background-color: #fff;
		border-radius: 16upx;
		padding: 25upx 0;
		box-sizing: border-box;

		.ccrboxtitle {
			display: flex;
			align-items: center;
			margin: 0 25upx;
			margin-bottom: 25upx;
			padding-bottom: 25upx;
			border-bottom: 2upx solid #f7f7f7;

			.ccrboxtitle_1 {
				font-size: 32rpx;
			}

			.ccrboxtitle_2 {
				font-size: 28upx;
				color: #999;
				margin-left: 10upx;
				margin-top: 5upx;
			}

		}

		.ddedsss {
			font-size: 28rpx;
			color: #ccc;
			display: flex;
			padding: 0 30upx;
			align-items: center;

			.de-a {
				height: 18rpx;
				width: 18rpx;
				display: inline-block;
				background: #4fc571;
				border-radius: 50%;
				margin: 0 10rpx 0 0rpx;
			}

			.de-b {
				height: 18rpx;
				width: 18rpx;
				display: inline-block;
				background: #fc826c;
				border-radius: 50%;
				margin: 0 10rpx 0 24rpx;
			}

			.de-c {
				height: 18rpx;
				width: 18rpx;
				display: flex;
				background: #53c7c7;
				border-radius: 50%;
				margin: 0 10rpx 0 24rpx;
			}
		}

		.frifms {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.desdxs {
				display: inline-block;
				width: 22%;
				display: flex;
				box-sizing: border-box;
				align-items: center;
				justify-content: center;


				.detedxrs {
					height: 120upx;
					position: relative;
					color: #4fc571;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 120upx;
				}

				.active-tag {
					color: #53c7c7;
				}

				.active-tags {
					color: #fc826c;

				}

			}

			.atives {
				margin-right: 12%;
			}
		}

	}

	.BuyTicket_4 {
		position: fixed;
		bottom: 0;
		width: 750upx;
		z-index: 1000;
		background-color: #fff;

		.BuyTicket_4x {
			display: flex;
			height: 120upx;
			padding: 0 30upx;
			align-items: center;

			.BuyTicket_4x_1 {
				color: #ea332a;
				font-size: 30upx;
				font-weight: 500;
			}

			.BuyTicket_4x_btn {
				background-color: #4374eb;
				color: #fff;
				font-size: 30upx;
				text-align: center;
				line-height: 90upx;
				height: 90upx;
				width: 300upx;
				margin-left: auto;
				border-radius: 45upx;
			}
		}

		.BuyTicket_4y {
			width: 100%;
			position: relative;
			background-color: #fff;
			padding-bottom: env(safe-area-inset-bottom);
			z-index: 100;
		}
	}
</style>